<template>
  <div class="home-grid"> 
    <van-grid :column-num="5" square :gutter="5">
    <van-grid-item v-for="list in menulist" :key="list">
      <van-image :src="list.url" ></van-image>
      <span>{{ list.text }}</span>
    </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import menu1 from '../assets/images/menu1.png';
import menu2 from '../assets/images/menu2.png';
import menu3 from '../assets/images/menu3.png';
import menu4 from '../assets/images/menu4.png';
import menu5 from '../assets/images/menu5.png';
import menu6 from '../assets/images/menu6.png';
import menu7 from '../assets/images/menu7.png';
import menu8 from '../assets/images/menu8.png';
import menu9 from '../assets/images/menu9.png';
import menu10 from '../assets/images/menu10.png';
const menulist = [
  { url: menu1, text: '今日爆款' },
  { url: menu2, text: '好物分享' },
  { url: menu3, text: '推荐购买' },
  { url: menu4, text: '购物心得' },
  { url: menu5, text: '直播专区' },
  { url: menu6, text: '签到中心' },
  { url: menu7, text: '值得购买' },
  { url: menu8, text: '每日优惠' },
  { url: menu9, text: '充值中心' },
  { url: menu10, text: '我的客服' },
];
</script>

<style lang="less" scoped>
.home-grid {
van-image{
  width: 55%;
}
span{
  font-size: 12px;
}
}
</style>